<template>
  <div class="goods">
    <div class="navigation">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="box-card">
      <div class="top">
        <div class="search-content">
          <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable
            @clear="getProductList"
          ></el-input>
          <!-- <el-input placeholder="请输入内容" v-model="input2"></el-input> -->
          <el-button
            class="search-icon"
            type="primary"
            icon="el-icon-search"
            @click="getProductList"
          ></el-button>
        </div>
        <div class="add-user">
          <el-button type="primary" @click="goAdd">添加商品</el-button>
        </div>
      </div>

      <template>
        <el-table :data="productList.goods" border style="width: 100%">
          <el-table-column label="#" type="index" width="60"></el-table-column>
          <el-table-column
            prop="goods_name"
            label="商品名称"
            width="320"
          ></el-table-column>
          <el-table-column prop="goods_price" label="商品价格（元）" width="100">
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量" width="100">
          </el-table-column>
          <el-table-column prop="add_time" width="165" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.add_time | formatDate("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-row class="el-row">
                <div class="bottomTip">
                  <el-tooltip
                    class="tip"
                    effect="dark"
                    placement="bottom"
                    :enterable="false"
                  >
                    <div slot="content">编辑</div>
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      size="small"
                    ></el-button>
                      <!-- @click="showEditDialog(scope.row.id)" -->

                  </el-tooltip>
                </div>

                <div class="bottomTip">
                  <el-tooltip
                    class="tip"
                    effect="dark"
                    content="删除"
                    placement="bottom"
                    :enterable="false"
                  >
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="small"
                      @click="showDeleteDialog(scope.row.goods_id)"
                    ></el-button>
                  </el-tooltip>
                </div>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 展示删除商品的对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteVisible"
      width="30%"
    >

      <span>是否删除该商品？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteGoods"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Goods",
  data() {
    return {
      input: "",
      value: true,
      pageValue: "",

      // 商品数据列表
      productList: [],
      // 当前页面
      pageNum: 1,
      // 每页显示多少条数据
      pagesize: 5,
      // 数据总数
      total: 0,
      users: [],

      // 查询参数
      query: "",

      // 是否展示删除商品的对话框
      deleteVisible:false,
      // 商品id
      goodsId:''
    };
  },

  created() {
    this.getProductList();
  },
  methods: {
    // 获取商品列表数据
    getProductList() {
      this.axios({
        method: "get",
        url: "goods",
        params: {
          query: this.query,
          pagenum: this.pageNum,
          pagesize: this.pagesize,
        },
      })
        .then((res) => {
          

          if (res.data.meta.status == 200) {
            this.productList = res.data.data;
            this.total = this.productList.total;
          }
        })
        .catch((err) => {
          
        });
    },

    // 底部页面选择
    handleSizeChange(val) {
      // 每页选择显示几条数据
      // 

      // this.$emit('handleSizeChange',showPageNum);
      this.pagesize = val;
      this.getProductList();
    },
    handleCurrentChange(val) {
      // 当前页
      // 

      // this.$emit('handleCurrentChange',currentPage)
      this.pageNum = val;
      this.getProductList();
    },


    // 前往添加商品页面
    goAdd() {
      // 
      this.$router.push({name: 'AddGood'})

    },

    // 打开删除商品的对话框
    showDeleteDialog(goods_id){
      
      this.deleteVisible = true;
      this.goodsId = goods_id;
    },

    // 删除商品
    deleteGoods(){
      this.axios({
        method:'delete',
        url:`goods/${this.goodsId}`
      }).then(res=>{
        
        if(res.data.meta.status == 200){
          this.$message.success('删除成功！');
          this.deleteVisible = false;
          this.getProductList();
        }else{
          this.$message.error('删除失败！');
          return;
        }
      }).catch(err=>{
        
      })
    }
  },
};
</script>

<style lang="less" scoped>
.goods {
  margin-top: 70px;
  // background-color: #fff;
}

.box-card {
  margin-top: 22px;

  .top {
    // border: 1px solid #000;
    display: flex;
    margin-bottom: 16px;
    .search-content {
      display: flex;
    }
    .add-user {
      margin-left: 18px;
    }
    /deep/ .el-input__inner {
      // border: 1px solid #000;
      width: 290px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      outline: none;
    }
    /deep/ .search-icon {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background-color: #ccc;
      border-color: #ccc;
    }
  }
  .bottom {
    margin-top: 15px;
  }

  /deep/ tbody .cell {
    font-size: 12px;
  }
}

.el-row {
  // border: 1px solid #000;
  display: flex;
  .bottomTip {
    margin-right: 10px;
  }
}
</style>